<template>
  <view class="category">
      <!-- 搜索部分 -->
	<!-- <view class="search">
		<input type="button" @tap="SearchPage" placeholder="搜索">
	</view> -->
    <SearchInput></SearchInput>
    <view class="category_list">
        <view class="category_nav">
             <view @tap='cateSelect(index)' :class="currentIndex===index?'active':''" v-for="(item,index) in list" :key="item.cat_id" class="category_nav_item">{{item.cat_name}}</view>
        </view>
        <!-- 右边 -->
         <view class="category_banner">
             <view class="category_banner_type" v-for="item in list[currentIndex].children" :key="item.cat_id">
                <view class="category_banner_top">/ {{item.cat_name}} /</view>
             <view class="category_banner_bottom">
            <view class="category_banner_item" v-for="ite in item.children" :key="ite.cat_id">
                 <image :src="ite.cat_icon" @tap="Togoodlist(ite.cat_id)"></image>
                 <view class="category_banner_item_name">{{ite.cat_name}}</view>
             </view>
             </view>
             </view>
         </view>
    </view>
  </view>
</template>
<script>
import http from '@/utils/http.js';
import SearchInput from '@/components/SearchInput';
export default {
    data(){
        return{
            //分类数据
            list:[],
            currentIndex:0
        }
    },
    components:{
        SearchInput
    },
    onLoad(){
        this.nav()
    },
methods:{
   async nav(){
        const data = await http.get('/categories');
        this.list=data;
        console.log(data);  
   },
   cateSelect(index){
       this.currentIndex=index
   },
   Togoodlist(cat_id){
       uni.navigateTo({
		 url: '/pages/goods_list/index?cat_id='+cat_id
        })
        console.log('跳转到good_list页面');
        
   }
}
}
</script>

<style lang="less" scoped>
.category{
    .category_list{
        display: flex;
        height: calc(100vh - 100rpx);
        .category_nav{
            width: 182rpx;
            height: 100%;
            background-color: #f3f3f3;
            overflow:scroll;
            .category_nav_item{
                display: flex;
                justify-content: center;
                align-items: center;
                height: 80rpx; 
                font-size: 29rpx;
                color: #646464;
            }
            .active{
                position: relative;
                color: #ea4753;
                font-weight: bold;
            }
            .active::before{
                content: '';
                position: absolute;
                top: 20rpx;
                left: 0;
                width: 4px;
                height: 43rpx;
                background-color: #ea4753;
            }
        }
        .category_banner{
            display: flex;
            flex-direction: column;
            flex: 1;
            overflow:scroll;
            background-color: #fff;
        .category_banner_type{
            padding: 0 20rpx;
            .category_banner_top{
                    text-align: center;
                    color: #b2b2b2;
                    padding-top: 30rpx;
                }
            .category_banner_bottom{
                display: flex;
                flex-wrap: wrap;
                 padding-top: 40rpx;
            .category_banner_item{
                display: flex;
                flex-direction: column;
                width: 33%;
                padding-bottom: 60rpx;
                image{
                    width: 120rpx;
                    height: 120rpx;
                    padding:0  0 5rpx 26rpx;  
                }
                .category_banner_item_name{
                    text-align: center;
                    color: #313131;
                    font-size: 24rpx;
                }
            }
            }
            }
        }
    }
}
</style>